<template>
  <div class="wrapper">
    <div class="title">
      <span
        ><img
          @click="juap"
          class="imga"
          width="17px"
          src="@/assets/arrow-left-bold.png"
          alt=""
      /></span>
      个人信息
    </div>
    <div class="zong">
      <div class="a">
        <span>头像</span>
        <div class="aa">
          <van-uploader :after-read="up" result-type="file">
            <img width="37px" :src="data.avatar" alt="" />
          </van-uploader>
          <span
            ><img
              class="img"
              width="17px"
              src="@/assets/arrow-right.png"
              alt=""
          /></span>
        </div>
      </div>
      <div class="a" @click="tousername">
        <span>昵称</span>
        <div class="aa">
          <span>{{ dataa.nickname }}</span>
          <span
            ><img
              width="17px"
              class="img"
              src="@/assets/arrow-right.png"
              alt=""
          /></span>
        </div>
      </div>
      <div class="a">
        <span>手机号</span>
        <div class="aa">
          <span>{{ dataa.mobile }}</span>
          <span
            ><img
              width="17px"
              class="img"
              src="@/assets/arrow-right.png"
              alt=""
          /></span>
        </div>
      </div>
      <div class="a" @click="sex">
        <span>性别</span>
        <div class="aa">
          <span>{{ dataa.sex == 0 ? "男" : "女" }}</span>
          <span
            ><img
              width="17px"
              class="img"
              src="@/assets/arrow-right.png"
              alt=""
          /></span>
        </div>
      </div>
      <div class="a" @click="showPopup">
        <span>出生日期</span>
        <div class="aa">
          <span>{{ dataa.birthday }}</span>
          <span
            ><img
              width="17px"
              class="img"
              src="@/assets/arrow-right.png"
              alt=""
          /></span>
        </div>
      </div>
      <!-- 修改生日弹出层 -->
      <van-popup
        v-model="show"
        position="down"
        :style="{ height: '50%', width: '100%' }"
      >
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="editday"
        />
      </van-popup>
      <!-- 修改城市弹出层 -->
      <van-popup
        v-model="showa"
        position="down"
        :style="{ height: '50%', width: '100%' }"
      >
        <van-area
          @change="change"
          @confirm="okedit"
          title="选择"
          :area-list="areaList[0]"
          :columns-placeholder="['请选择', '请选择', '请选择']"
        />
      </van-popup>
      <!-- 修改年级弹出层 -->
      <van-popup
        v-model="showb"
        position="down"
        :style="{ height: '50%', width: '100%' }"
      >
        <van-picker
          title="标题"
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
        />
      </van-popup>
      <div class="a" @click="showcheng">
        <span>所在城市</span>
        <div class="aa">
          <span
            >{{ dataa.province_name }},{{ dataa.city_name }},{{
              dataa.district_name
            }}</span
          >
          <span
            ><img
              width="17px"
              class="img"
              src="@/assets/arrow-right.png"
              alt=""
          /></span>
        </div>
      </div>

      <div class="a" @click="jupxue">
        <span>学科</span>
        <div class="aa">
          <span>{{ xueli.join(",") }}</span>
          <span
            ><img
              width="17px"
              class="img"
              src="@/assets/arrow-right.png"
              alt=""
          /></span>
        </div>
      </div>
      <div class="a" @click="showPopupb">
        <span>年级</span>
        <div class="aa">
          <span>大学</span>
          <span
            ><img
              width="17px"
              class="img"
              src="@/assets/arrow-right.png"
              alt=""
          /></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { upimg, edituser, getuser, sheng } from "../../../../request/http";

export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {
      data: [],
      dataa: [],
      // 修改生日弹出层
      show: false,
      showa: false,
      showb: false,
      minDate: new Date(2000, 0, 1),
      maxDate: new Date(2020, 10, 1),
      currentDate: new Date(),
      // 城市数据
      areaList: [
        {
          province_list: {},
          city_list: {},
          county_list: {},
        },
      ],
      code: [],
      // 学历数据
      xueli: [],
      columns: [
        "小学一年级",
        "小学二年级",
        "小学三年级",
        "小学四年级",
        "小学五年级",
        "小学六年级",
        "初一",
        "初二",
      ],
      arr: [
        [
          { attr_id: 1, attr_val_id: 18 },
          { attr_id: 2, attr_val_id: 7 },
        ],
        [
          { attr_id: 1, attr_val_id: 19 },
          { attr_id: 2, attr_val_id: 7 },
        ],
      ],
    };
  },
  computed: {},
  watch: {},
  created() {
    // 获取本地数据渲染页面
    // console.log(JSON.parse(localStorage.getItem("data")))
    this.data = JSON.parse(localStorage.getItem("data"));
    // 获取用户信息
    getuser().then((res) => {
      console.log(res);
      this.dataa = res;
      for (const i in this.dataa.attr) {
        console.log(this.dataa.attr[i].attr_value);
        this.xueli.push(this.dataa.attr[i].attr_value);
      }
    });
  },
  mounted() {},
  methods: {
    // 上传图片
    up(e) {
      console.log(e);
      let content = e.file;
      let data = new FormData();
      // FormData 对象的使用：
      // 1.用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成一个queryString
      // 2. 异步上传二进制文件。
      data.append("file", content);
      upimg(data).then((res) => {
        console.log(res);
        this.$toast.success("修改成功");
        edituser({ avatar: res.path }).then((res) => {
          console.log(res);
        });
        this.data.avatar = res.path;
        localStorage.setItem("data", JSON.stringify(this.data));
      });
    },
    // 跳转到修改用户名页面
    tousername() {
      // 跳转到修改用户
      this.$router.push({
        name: "nickname",
        params: {
          nickname: this.dataa.nickname,
        },
      });
    },
    // 跳回页面
    juap() {
      this.$router.go(-1);
    },
    // 控制生日弹出层
    showPopup() {
      this.show = true;
    },
    // 控制年级弹出层
    showPopupb() {
      this.showb = true;
    },

    // 控制城市弹出层
    showcheng() {
      this.showa = true;
      // 获取省份数据
      sheng().then((res) => {
        console.log(res);
        var str = "{";
        res.forEach((item) => {
          str = `${str}"${item.id}":"${item.area_name}",`;
        });
        var stra = str.substring(0, str.length - 1) + "}";
        this.areaList[0].province_list = JSON.parse(stra);
      });
    },
    // 封装方法
    aa(res, dizhi) {
      var str = "{";
      res.forEach((item) => {
        str = `${str}"${item.id}":"${item.area_name}",`;
      });
      var stra = str.substring(0, str.length - 1) + "}";
      dizhi.city_list = JSON.parse(stra);
    },
    // 封装方法
    bb(res, dizhi) {
      var str = "{";
      res.forEach((item) => {
        str = `${str}"${item.id}":"${item.area_name}",`;
      });
      var stra = str.substring(0, str.length - 1) + "}";
      dizhi.county_list = JSON.parse(stra);
    },
    // 数据变动出发
    change(a, b, c) {
      console.log(b);
      sheng(b[0].code).then((res) => {
        this.aa(res, this.areaList[0]);
        if (b[1] != undefined) {
          sheng(b[1].code).then((res) => {
            this.bb(res, this.areaList[0]);
            console.log(b);
            this.code = b;
          });
        }
      });
    },
    // 确认修改
    okedit() {
      edituser({
        province_id: this.code[0].code,
        city_id: this.code[1].code,
        district_id: this.code[2].code,
      }).then((res) => {
        console.log(res);
        // 获取用户信息
        this.showa = false;
        getuser().then((res) => {
          this.dataa = res;
        });
      });
    },
    // 修改生日
    editday(e) {
      console.log(e);
      let year = e.getFullYear();
      let month = e.getMonth() + 1;
      let day = e.getDate();
      console.log(year, month, day);
      let data = year + "-" + month + "-" + day;
      edituser({ birthday: data }).then((res) => {
        console.log(res);
        this.show = false;
        // 获取用户信息
        getuser().then((res) => {
          this.dataa = res;
        });
      });
    },
    // 跳转到修改角色页面
    sex() {
      this.$router.push("/sex");
    },
    // 跳转到学科页面
    jupxue() {
      this.$router.push("/xueli");
    },
    // 年级确认    有bug

    onConfirm(value, index) {
      console.log(value);
      this.columns.forEach((item,index) => {
        if(value == item){
          console.log(JSON.stringify(this.arr[index]))
          edituser({user_attr:JSON.stringify(this.arr[index])}).then(res=>{
            console.log(res)
          })
        }
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.wrapper {
  background: #eeeeee;
  min-height: 100vh;
}
.title {
  background: white;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  height: 50px;
  position: relative;
  .imga {
    position: absolute;
    left: 20px;
    top: 15px;
    width: 20px;
  }
}
.zong {
  margin-top: 10px;
  background: white;
  height: 100%;
  > .a {
    color: #8c8c8c;
    box-sizing: border-box;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    height: 60px;
    background: white;
    border-bottom: 1px solid #eeeeee;
    img {
      border-radius: 50%;
      padding: 0px 7px;
      height: 39px;
    }
    .img {
      height: 19px;
    }
    > .aa {
      display: flex;
      align-items: center;
    }
  }
}
</style>
